<template>
  <Header/>

  <div class="top-box"></div>
  <div class="next-box" @click="stepAction.next()">
    <div class="next"></div>
    <div class="text">点击开启珠实周年旅程</div>
  </div>
</template>

<script setup>
  import { stepAction } from '@/stores'
</script>

<style scoped lang="scss">
  .top-box {
    height: calc(100vh);
    background: url('https://lc-ocean.oss-cn-guangzhou.aliyuncs.com/ocean-2024/uploads/celebrate/bg/bgmforindex.png') no-repeat center bottom / 100% auto;
  }

  .next-box {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 1.59rem;
    padding-top: .36rem;
    box-sizing: border-box;

    .next {
      width: .35rem;
      height: .3rem;
      background: url('@/assets/images/next-bg.png') no-repeat center / 100% 100%;
      margin: 0 auto .13rem;
    }

    .text {
      font-size: .12rem;
      color: #4D7BAF;
      text-align: center;
      letter-spacing: .03rem;
    }
  }
</style>
